<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>催办详情页</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
</head>

<style>
    .tdAdapt {
        font-size: 16.0pt;
        word-wrap: break-word;
        word-break: break-all;
    }

    .textarea {
        margin-right: 3px;
    }

    .divarea {
        margin-bottom: 5px;
    }

    .tub{
        font-size: 16px;
        margin-right: 5px;
    }
</style>

<body>
<div class="ok-body" style="background: #F8F8F8">
    <div class="layui-row ">
        <div class="layui-col-md9" style="background-color:#f8f8f8;">
            <div class="layui-row">
                <hr class="layui-bg-gray">
                <fieldset class="layui-elem-field">
                    <legend>警情详情<span class="layui-badge layui-bg-red">催办</span></legend>
                    <div class="layui-field-box " style="margin-left: 20px;">
                        <div class="layui-row">
                            <div class="layui-col-md9">
                                <div class="divarea">
                                    <i class="tub layui-icon layui-icon-username" style="color: #1E9FFF;"></i>
                                    <sapn class="textarea">处理者 : <span id="policeName">加载中</span></sapn>
                                </div>
                                <div class="divarea">
                                    <i class="tub layui-icon layui-icon-home" style="color: #FF5722;"></i>
                                    <sapn class="textarea">处理单位 : <span id="departmentName">加载中</span></sapn>
                                </div>
                                <div class="divarea">
                                    <i class="tub layui-icon layui-icon-log" style="color: #FFB800;"></i>
                                    <sapn class="textarea">分派时间 : <span id="askForTime">加载中</span></sapn>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="layui-bg-gray">
                    <div>
                        <div style="background: #d2d2d2">
                            <div style="width: 80%;height: 100%;margin: 0 auto;">
                                <div class="layui-collapse" lay-filter="caseData">
                                    <div class="layui-colla-item">
                                        <h2 class="layui-colla-title" style="font-size: 16px" ><span id="caseDataChange">显示</span>警情信息</h2>
                                        <div class="layui-colla-content layui-show" style="background-color:#fdfdfd;">
                                            <div style="background-color:#fdfdfd;">
                                                <iframe scrolling="no" frameborder="0" src="../caseCommonData/caseData.html" width="100%"
                                                        height="700px" id="caseData"
                                                        onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>700?fdh:700);"></iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div style="background-color:#fdfdfd;margin-top: 10px;padding-top: 20px;">
                                    <div style="background-color:#3399ff;border-bottom:5px solid #ffcc00;height: 30px;line-height:30px;padding-left:10px;font-size: 16px;">
                                        <p style="color: #ffffff;">催办记录(共<span id="processCount">0</span>条)</p>
                                    </div>
                                    <div style="background-color:#fdfdfd;margin-top: 10px;padding-top: 20px;">
                                        <ul class="layui-timeline" id="timeline">
                                        </ul>
                                        <div style="height: 50px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="layui-col-md3" style="background-color:#f8f8f8;">
            <div class="layui-row">
                <hr class="layui-bg-gray"/>
                <fieldset class="layui-elem-field">
                    <legend>分配信息</legend>
                    <div style="background-color: #f8f8f8;height: auto;margin:15px 20px 0 30px">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-username" style="color: #1E9FFF;"></i>
                                <label>分派者 : </label>
                                <span id="askPoliceName">加载中</span>
                            </div>
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-home" style="color: #FF5722;"></i>
                                <label>分派单位 : </label>
                                <span id="askDepartmentName">加载中</span>
                            </div>
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-log" style="color: #FFB800;"></i>
                                <label>分派时间 : </label>
                                <span id="askTime">加载中</span>
                            </div>
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-read" style="color: #009688;"></i>
                                <label>警情描述 : </label>
                                <span id="caseDescription">加载中</span>
                            </div>
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-diamond" style="color: #ff1e31;"></i>
                                <label>督办级别 : </label>
                                <span id="procLevel">加载中</span>
                            </div>
                        </form>
                    </div>
                </fieldset>
                <fieldset class="layui-elem-field">
                    <legend style="color: red">最新催办信息</legend>
                    <div style="background-color: #f8f8f8;height: auto;margin:15px 20px 0 30px">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-username" style="color: #ff1e1e;"></i>
                                <label>催办者 : </label>
                                <span id="urgingPoliceName">加载中</span>
                            </div>
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-log" style="color: #ff1e1e;"></i>
                                <label>催办时间 : </label>
                                <span id="urgingTime">加载中</span>
                            </div>
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-read" style="color: #ff1e1e;"></i>
                                <label>催办信息 : </label>
                                <span id="urgingRemake">加载中</span>
                            </div>
                            <div id="returnData" style="display: none">
                                <div class="layui-form-item">
                                    <i class="tub layui-icon layui-icon-read" style="color: #009688;"></i>
                                    <label>催办反馈 : </label>
                                    <textarea  style="margin-top: 10px" required lay-verify="required" id="procRemark" placeholder="此处填写反馈内容"
                                              class="layui-textarea"></textarea>
                                </div>
                                <div class="layui-form-item">
                                    <button type="button" class="layui-btn" id="procRemarkBtn"
                                            style="float: right;margin-top: 10px;margin-right: 20px;">回复</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>
<br/>
</body>

<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/selectMore.js"></script>
<script src="../../js/application.js"></script>

<script>
    let processDataHeight=0
    var urgingId=""
    var processId=GetQueryString("processid");//处理过程号
    var caseId=GetQueryString("caseid");//案件编号
    //获取详细内容页
    getCaseData(caseId)
    function getCaseData(caseId){
        $("#caseData").on("load", function () {
            var data={caseId:caseId}
            this.contentWindow.getParentData(data)
        })
    }

    //分派信息绑定
    $.ajax({
        url: mainUri+"/VCaseProcInfoByPolice/getCaseProcInfoByPolice",
        data: {processId:processId,policeId:police.policeId,procTatus:0},
        type: "Post",
        dataType: "json",
        success: function (data) {
            if(data.data.length>0) {
                var newUrgingData = data.data[data.data.length - 1]
                $("#policeName").html(newUrgingData.nfullName);
                $("#departmentName").html(newUrgingData.nextDepartmentName);
                $("#askForTime").html(newUrgingData.askForTime);
                $("#askPoliceName").html(newUrgingData.askFullName);
                $("#askDepartmentName").html(newUrgingData.askForDepartmentName);
                $("#askTime").html(newUrgingData.askForTime);
                $("#caseDescription").html(newUrgingData.caseDescription);
                $("#procLevel").html(newUrgingData.procLevel);
            }
        },
        error: function () {
            console.log("数据加载失败")
        }
    });
    //回复催办内容
    function setUrgingLine(data) {
        var top = "<li class=\"layui-timeline-item\">\n" +
            "            <i class=\"layui-icon layui-bg-blue layui-timeline-axis\">&#xe63f;</i>\n" +
            "            <div class=\"layui-timeline-content layui-text\">";
        var botton = "</div>\n" +
            "        </li>\n" +
            "        <hr style='border: 1px dashed #4db0fd;height: 1px;margin: 0 15px 20px 10px'>";
        for (var i = 0; i < data.length; i++) {
            if (data[i].reviewContent == 'null' || data[i].reviewContent == null) {
                data[i].reviewContent = '无'
            }
            var content = " <h3 class=\"layui-timeline-title\"><span>" + data[i].urgingDepartment + "</span>" +
                "<span style=\"margin-left: 10px\">" + data[i].urgingTime + "</span>" +
                "<span style=\"margin-left: 10px\">" + data[i].fullName + "(" + data[i].roleName + ")" + "</span></h3>\n" +
                "                <p><span style='color: #333'>催办内容:</span>" +
                data[i].urgingContent +
                "                </p></br>" +
                "                <p ><span style='color: #333'>回复内容:</span>" +
                data[i].reviewContent +
                "                </p>"
            var contentIsRes = "";
            $("#timeline").append(top + content + contentIsRes + botton);
        }
    }
     //催办信息展示
    $.ajax({
        url: mainUri+"/vurging/selectVUrgings",
        data: {processId:processId},
        type: "Post",
        dataType: "json",
        success: function (data) {
            if(data.data.length>0) {
                var newUrgingData = data.data[data.data.length - 1]
                $("#processCount").html(data.data.length)
                setUrgingLine(data.data)
                if (!newUrgingData.read) {
                    $("#returnData").show();
                }
                $("#urgingPoliceName").html(newUrgingData.fullName + "(" + newUrgingData.roleName + ")");
                $("#urgingTime").html(newUrgingData.urgingTime);
                $("#urgingRemake").html(newUrgingData.urgingContent);
                urgingId = newUrgingData.urgingId
            }
        },
        error: function () {
            console.log("数据加载失败")
        }
    });
    //详细警情页显示隐藏
    layui.use(['element','layer'], function () {
        var element = layui.element;
        var layer = layui.layer;
        element.on('collapse(caseData)', function(data){
            if(processDataHeight==0){
                processDataHeight=$("#processData").height();
            }
            if(!data.show){
                if(processDataHeight<800){
                    $("#processData").height(800)
                }
                $("#caseDataChange").html("显示")
            }else{
                $("#processData").height(processDataHeight)
                $("#caseDataChange").html("隐藏")
            }
        });
        //催办信息反馈
        function updateUrging(){
            if(urgingId==""){
                layer.alert("数据加载中,请稍后");
                return
            }
            $.ajax({
                url: mainUri + "/urging/updateById",
                data: {urgingId:urgingId,reviewContent:$("#procRemark").val().trim()},
                type: "Post",
                dataType: "json",
                success: function (data) {
                    showloading(false)
                    if (data.code ==0) {
                        layer.msg('反馈成功', {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            window.parent.opener.location.reload();
                            window.close();
                        });
                    } else {
                        layer.alert(data.msg);
                    }
                },
                error: function () {
                    showloading(false)
                    layer.alert('开始处理失败,请重试');
                }
            })
        }

         //反馈内容判断
        $("#procRemarkBtn").on("click",function(){
            var procRemarkVal=$("#procRemark").val();
            if(procRemarkVal.trim()==""){
                layer.alert("反馈内容为空")
                return
            }
            layer.confirm('提交反馈内容？', {
                btn: ['确定', '取消']//按钮
                , title: ''
            }, function (index) {
                layer.close(index);
                //此处请求后台程序，下方是成功后的前台处理……
                showloading(true)
                updateUrging()
            });
        })

    });


    function caseReturnData(returnData) {

    }
    //文档下载窗口
    function showProcessContent(clickId) {
        layui.use(['element','layer','okLayer'], function () {
            let okLayer = layui.okLayer;
            okLayer.open("查询条件", "../caseCommonData/fileData.html?processId=" + clickId, "35%", "50%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
            }, function () {

            })
        })
    }

</script>

</html>